import React, { useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { GestureHandlerRootView, GestureDetector, Gesture } from 'react-native-gesture-handler';
import { WebView } from 'react-native-webview';
import { Link } from 'expo-router';

const GestureEventPenetration = () => {
  const gesture = Gesture.Tap()
    .onBegin(() => {
      console.log('Overlay tapped');
    });

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <View style={styles.gestureArea}>
        {/* Overlay Gesture Detector */}
        <GestureDetector gesture={gesture}>
          <View style={styles.overlay}>
            <Link href="/shang" style={styles.overlayText}>
              上层页面时蓝色80%半透明
            </Link>
            <Text style={styles.overlayText}>下层是一个webview打开的网页</Text>
            <Text style={styles.overlayText}>
              可以看到在上层页面的事件传递到了下层的webview上
            </Text>
          </View>
        </GestureDetector>
        <View style={styles.webcontain}>
          {/* WebView (below overlay) */}
          <WebView
            style={styles.webView}
            source={{ uri: 'https://www.baidu.com' }}
            onShouldStartLoadWithRequest={(event) => {
              console.log('WebView link clicked:', event.url);
              return true; // Allow loading the URL
            }}
          />
        </View>
      </View>
    </GestureHandlerRootView>
  );
};

const styles = StyleSheet.create({
  gestureArea: {
    flex: 1,
  },
  webcontain: {
    flex: 1,
    pointerEvents: 'none',
  },
  webView: {
    flex: 1,
    opacity: 1,
    pointerEvents: 'auto',
  },
  overlay: {
    ...StyleSheet.absoluteFillObject, // 覆盖层填满整个屏幕
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 255, 0.8)', // 半透明背景
  },
  overlayText: {
    color: 'white',
    fontSize: 28,
  },
});

export default GestureEventPenetration;
